@import "./constants";
@import "./mixin";
@media screen and (min-width: 1200px) {
  header {
    .wrapper{
      .icon-box{
        display: none;
      }
    }
    .avatar-box{
      right: 10%;
    }
    .sign-box{
      right: 10%;
    }
  }
  .container {
    .content-wrapper{
      margin-left: calc(@slide_left_right + @slide_width );
      padding-left: 20px;
      padding-right: @slide_left_right;
      .top-wrapper{
        .type-box{
          display: flex;
          height: 100%;
          &>div{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            text-align: center;
          }
        }
      }

      .btm-wrapper{
        &>ul>li{
          .img-wrapper{
            display: block;
            width: 80px;
            margin-right: 30px;
            img{
              width: 80px;
              height: 80px;
            }
          }
        }
      }
    }

  }
  .slide-bar{
    left: 10%;
    z-index: 5;
    .icon-close{
      display: none;
    }
  }
  .layer{
    &.reverse{
      .modal{
        &:before{
          left: 23px;
          top: 103px;
          transform: rotate(245deg) skew(39deg);
        }
      }
    }
    .modal{
      &:before{
        position: absolute;
        left: 16px;
        width: 60px;
        height: 60px;
        content: '';
        background: linear-gradient(to top, @lightblue, @lightblue) no-repeat, linear-gradient(to left, @lightblue, @lightblue) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,1) 26px) repeat;
        background-size: 34px 1px, 1px 27px, 26px 26px;
        transform: rotate(65deg) skew(39deg);
      }
    }
  }

}
